<script setup lang="ts">
import { useRoute } from 'vue-router';
import { tabbarWhiteList } from '@/config/routes';
import tabbarcar1 from '@/assets/icons/tabbarcar1.svg';
import tabbarcar from '@/assets/icons/tabbarcar.svg';
import tabbarhome1 from '@/assets/icons/tabbarhome1.svg';
import tabbarhome from '@/assets/icons/tabbarhome.svg';
import tabbarlist from '@/assets/icons/tabbarlist.svg';
import tabbarlist1 from '@/assets/icons/tabbarlist1.svg';
import tabbarmy from '@/assets/icons/tabbarmy.svg';
import tabbarmy1 from '@/assets/icons/tabbarmy1.svg';

const active = ref(0);
const route = useRoute();
const show = computed(() => tabbarWhiteList.includes(route.name as string));
</script>

<template>
  <van-tabbar active-color="#00BA9F" v-if="show" v-model="active" route placeholder>
    <van-tabbar-item icon="home-o" replace to="/">
      <template #icon="props">
        <van-image :src="props.active ? tabbarhome1 : tabbarhome" />
      </template>
      <span>首页</span>
    </van-tabbar-item>
    <van-tabbar-item icon="setting-o" replace to="/goodsCategory">
      <template #icon="props">
        <van-image :src="props.active ? tabbarlist1 : tabbarlist" />
      </template>
      <span>商品分类</span>
    </van-tabbar-item>
    <van-tabbar-item icon="setting-o" replace to="/car">
      <template #icon="props">
        <van-image :src="props.active ? tabbarcar1 : tabbarcar" />
      </template>
      <span>购物车</span>
    </van-tabbar-item>
    <van-tabbar-item icon="setting-o" replace to="/my">
      <template #icon="props">
        <van-image :src="props.active ? tabbarmy1 : tabbarmy" />
      </template>
      <span>我的</span>
    </van-tabbar-item>
  </van-tabbar>
</template>
<style scoped lang="scss">
:deep(.van-tabbar-item__icon) {
  margin-bottom: 0;
}
</style>
